<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="ok" value="%{getText(\"button.ok\")}" />
<link href="${pageContext.request.contextPath}/css/jquery-ui-combobox.custom.css" rel="stylesheet"
  type="text/css" />
<script type="text/javascript">
  $(function() {
    $('#productCategoryMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $("#dialog-form").dialog({
      height : 540,
      width : 800,
      modal : true,
      buttons : {
        '<s:property value="#ok" />' : function() {
          $(this).dialog("destroy");
        }
      },
      close : function() {
        $(this).dialog("destroy");
      }
    });
    $("#productCategoryAccordion").multipleaccordion();
    $('#productCategoryAccordion > div > table td.LABEL').css({
      'width' : '95px'
    });
    $('input, select, textarea, button').not(':hidden').each(function(idx) {
      $(this).prop('tabindex',idx + 1);
    });
    $('#descriptionSpan').addClass('wrap');
  });
</script>
<div id="dialog-form"
  title='<s:property value="getText('title.view.product.category')"/>'>
  <div id="productCategoryMsg"></div>
  <div id="productCategoryAccordion">
    <h3>
      <s:property value="getText('title.product.category')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="name"><s:property
                value="getText('field.product.category.name')" /></label></td>
          <td><span><s:property value="%{productCategory.name}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="description"><s:property
                value="getText('field.description')" /></label>
          <td><span id="descriptionSpan"><s:property
                value="%{productCategory.description}" /></span></td>
        </tr>
      </table>
    </div>
  </div>
</div>
